import {
  ReactFlow,
  useNodesState,
  useEdgesState,
  addEdge,
  MiniMap,
  Controls,
  Background,
  SelectionMode,
  Panel,
} from '@xyflow/react';
import { Select } from 'antd';
import { useMemo, useCallback, useState } from 'react';
import TextUpdaterNode from './_component/customNode';

const Options = Select.Option;

const SetBackgroundButton = ({ onChange }) => {
  return (
    <Select
      defaultValue={'dots'}
      onChange={(e) => {
        onChange(e);
      }}
    >
      <Options value="dots">Dots</Options>
      <Options value="lines">Lines</Options>
      <Options value="cross">Cross</Options>
    </Select>
  );
};

export default function App() {
  const rfStyle = {
    backgroundColor: '#B8CEFF',
  };
  const nodeTypes = { TextUpdaterNode: TextUpdaterNode };
  const initialNodes = useMemo(
    () => [
      { id: '1', position: { x: 10, y: 0 }, data: { label: '1' }, type: 'TextUpdaterNode' },
      { id: '2', position: { x: 0, y: 100 }, data: { label: '2' }, type: 'output' },
      {
        id: '21',
        type: 'input',
        data: { label: 'Input Node' },
        position: { x: 150, y: 25 },
        style: { backgroundColor: '#6ede87', color: 'white' },
      },

      {
        id: '22',
        // you can also pass a React component as a label
        data: { label: <div>Default Node</div> },
        position: { x: 180, y: 125 },
        style: { backgroundColor: '#ff0072', color: 'white' },
      },
      {
        id: '23',
        type: 'output',
        data: { label: 'Output Node' },
        position: { x: 250, y: 250 },
        style: { backgroundColor: '#6865A5', color: 'white' },
      },
    ],
    []
  );

  const initialEdges = useMemo(
    () => [
      { id: 'e1-2', source: '1', target: '2', animated: true },
      { id: 'e21-22', source: '21', target: '22', animated: true },
      { id: 'custom-12', source: '1', target: '22', sourceHandle: 'b' },
      { id: 'custom-1', source: '1', target: '23', sourceHandle: 'c' },
    ],
    []
  );
  // eslint-disable-next-line
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  const onConnect = useCallback(
    (params) => {
      setEdges((eds) => addEdge(params, eds));
    },
    [setEdges]
  );

  const [bg, setBg] = useState('dots');

  const nodeColor = (node) => {
    switch (node.type) {
      case 'input':
        return '#6ede87';
      case 'output':
        return '#6865A5';
      default:
        return '#ff0072';
    }
  };
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow
        style={rfStyle}
        nodeTypes={nodeTypes}
        fitView
        panOnScroll={false}
        selectionOnDrag={false}
        panOnDrag
        selectionMode={SelectionMode.Partial}
        onConnect={onConnect}
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
      >
        <Controls />
        <MiniMap nodeColor={nodeColor} nodeStrokeWidth={3} zoomable pannable />
        <Background variant={bg} gap={12} size={1} />
        <Panel position="top-left">
          <SetBackgroundButton
            onChange={(e) => {
              setBg(e);
            }}
          />
        </Panel>
      </ReactFlow>
    </div>
  );
}
